<template>
  <view v-if="goodsInfo.goods_introduce" class="goods-info-container">
    <!-- 轮播图区域 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular
      indicator-active-color="#c00000" indicator-color="#efefef">
      <swiper-item v-for="(pic,index) in goodsInfo.pics" :key="index">
        <image class="swiper-item" :src="pic.pics_big" @click="preview(index)"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <!-- 价格 -->
      <view class="price">￥{{goodsInfo.goods_price}}</view>
      <!-- 商品信息主体 -->
      <view class="gf-body">
        <!-- 左侧文字介绍 -->
        <view class="introduce">{{goodsInfo.goods_name}}</view>
        <!-- 右侧收藏 -->
        <view class="favi">
          <uni-icons type="star" size="16"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <!--  免运费-->
      <view class="my">
        <text>快递：免运费</text>
      </view>
    </view>
    <!-- 富文本 -->
    <rich-text class="rt" :nodes="goodsInfo.goods_introduce"></rich-text>

    <!-- 商品详情页底部导航组件 -->
    <view class="nav-goods">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>

</template>

<script>
  import {
    computed
  } from 'vue'
  import {
    escook
  } from '../../utils/escook/index.js'
  import {
    showMsg
  } from '../../utils/interact/index.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'


  export default {
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['addedCount'])
    },
    data() {
      return {
        goodsInfo: {},

        //商品导航组件的配置
        options: [{
          icon: 'shop',
          text: '店铺',
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    onLoad(options) {
      this.getGoodsDetail(options.goods_id);
    },

    watch: {
      //该函数在页面首次加载时不会被执行
      /* addedCount(newVal) {
        const res = this.options.find(c => c.text === '购物车');

        if (res) {
          res.info = newVal;
        }
      } */
      
      addedCount:{
        handler(newVal) {
        const res = this.options.find(c => c.text === '购物车');

        if (res) {
          res.info = newVal;
        }
      },
      immediate:true
      }
    },

    methods: {
      //注册m_cart仓库的addToCart函数
      ...mapMutations('m_cart', ['addToCart']),
      //网络请求组
      async getGoodsDetail(goods_id) {
        const {
          data: res
        } = await escook.get('api/public/v1/goods/detail', {
          goods_id
        });

        if (res.meta.status !== 200) return showMsg();
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, "<img style='display:block;'")
          .replace(/webp/g, 'jpg');
        this.goodsInfo = res.message;
      },

      //事件回调组
      preview(index) {
        //预览效果
        uni.previewImage({
          current: index,
          urls: this.goodsInfo.pics.map(pic => pic.pics_big)
        })
      },
      //点击跳到购物车页面
      onClick(event) {
        if (event.content.text === '购物车') {
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      //加入购物车的点击回调
      buttonClick(event) {
        //通过event.content.text的值来判断用户点击的是加入购物车按钮还是立即购买按钮
        if (event.content.text === '加入购物车') {
          // 每个商品的信息对象，都包含如下 6 个属性：
          // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
          //定义一个变量存储购物车商品的信息
          const good = {
            goods_id: this.goodsInfo.goods_id,
            goods_name: this.goodsInfo.goods_name,
            goods_price: this.goodsInfo.goods_price,
            goods_count: 1,
            goods_small_logo: this.goodsInfo.goods_small_logo,
            goods_state: false, //默认不勾选
          }

          //调用仓库的addToCart
          this.addToCart(good);
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .goods-info-container {
    padding-bottom: 50px;
  }

  //轮播图区域 
  .swiper {
    height: 580rpx;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  //商品信息区域
  .goods-info-box {
    background-color: #fff;
    padding-top: 10px;
    padding: 20rpx 20rpx;
    padding-right: 0;

    //价格
    .price {
      color: #c00000;
      font-size: 38rpx;
      margin-bottom: 10px;
    }

    //商品名称
    .gf-body {
      display: flex;
      margin-bottom: 10rpx;

      .introduce {
        font-size: 26rpx;
        font-weight: bold;
        margin-right: 12rpx;
      }

      .favi {
        width: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #444;
        border-left: 1px solid #333;
      }
    }

    //免运费
    .my {
      font-size: 26rpx;
      color: #543;
    }
  }

  //商品详情页底部导航组件
  .nav-goods {
    width: 100vw;
    position: fixed;
    bottom: 0;
  }
</style>